---
title: User interface
summary: >-
  Configure parts of the Admin UI to improve the experience of your content
  editors.
---
Configure parts of the Admin UI to improve the experience of your content editors. Making the interface familiar to your editors will help them get started quickly and feel at home.

## Example

Out-of-the-box Keystatic will default the brand name depending on the storage mode used. You can override this by providing a `brand` object in the `ui` key of your config.

```jsx
// keystatic.config.ts
import { config } from '@keystatic/core'

export default config({
  ...
  ui: {
    brand: { name: 'Your brand' },
  },
})
```

## Brand

In the example above we've set the brand `name`, which will be used in the Admin UI as the title of the app. You can also set the brand `mark` using a React component to render your logo or anything you like.

We recommend a maximum height of `24px` so the element fits well with the rest of the UI.

{% aside icon="🎨" %}
The component has a single prop `colorScheme` which is either `light` or `dark` depending on the user's preference. You can use this to render a different asset or apply a different style.
{% /aside %}

```tsx
// keystatic.config.tsx
import { config } from '@keystatic/core'

export default config({
  ...
  ui: {
    brand: {
      name: 'Your brand',
      mark: ({ colorScheme }) => {
        let path = colorScheme === 'dark'
          ? '//your-brand.com/path/to/dark-logo.png'
          : '//your-brand.com/path/to/light-logo.png';
        
        return <img src={path} height={24} />
      },
    },
  },
})
```

When using inline SVGs you can employ `"currentColor"` for `fill` and `stroke` values to inherit the foreground color. This is what we do for the Keystatic instance of this docs website.

## Navigation

Out-of-the-box Keystatic will separate navigation into two groups: `Collections` and `Singletons`. You can override this by providing a `navigation` object in the `ui` key of your config, organising your content into a simple list or any number of groups.

```jsx
// keystatic.config.ts
import { config } from '@keystatic/core'

export default config({
  ...
  ui: {
    navigation: {
      'Content': ['pages', 'posts'],
      'Settings': ['site', 'seo'],
    },
  },
})
```

Use the special `"---"` key to insert a separator between items.

```jsx
// keystatic.config.ts
import { config } from '@keystatic/core'

export default config({
  ...
  ui: {
    navigation: [
      'pages',
      'posts',
      '---',
      'site',
      'seo',
    ],
  },
})
```

The "Dashboard" item will always be first in the navigation list.

---

## Screencast walk-through

These two segments of the [Keystatic Mini-Course on YouTube](https://www.youtube.com/playlist?list=PLHrxuCR-0CcSmkyLcmdV7Ruql8DTm644k) may help understand how the user interface customization works:

{% embed
   mediaType="video"
   embedCode="<iframe src=\"https://www.youtube.com/embed/A_20VrYEaUs?si=mDDK52Nlhg4v1v9x\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>" /%}

{% embed
   mediaType="video"
   embedCode="<iframe src=\"https://www.youtube.com/embed/_Y7v9q8Blbs?si=mDDK52Nlhg4v1v9x\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>" /%}

---

## Type signature

Find the latest version of the `UserInterface` type signature at: [https://docsmill.dev/npm/@keystatic/core@latest#/.UserInterface](https://docsmill.dev/npm/@keystatic/core@latest#/.UserInterface)
